<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{a}}-----{{b}}


    </div>
    <script src="./vue.js"></script>
    <script>
        let obj={
            a:123,
            b:undefined
        }
        // 实例化
        let app=new Vue({
            el:"#app",
            data:obj
        })

        // 1.可以修改变量值
        app.a=222;
        obj.a=333;
        app.b=555;

        // 2.后期添加变量，想要显示到页面中，都会报错，
        // 因为变量b不是在实例化过程中定义的，而是在呈现期间引用的，无法展示到html页面中
        // 会报错
        // app.b=444;
        // obj.b=555;

        // 原因：当一个Vue实例对象被创建时，它将data对象中所有的属性添加到Vue的响应式系统中
        // 当这些属性的值发生改变时，视图将会产生响应，就是匹配更新为新的值。
        // 当这些数据改变的时候，视图就会重新渲染
        // 但是只有在实例对象被创建时就存在于data中的属性才是响应式，后面新增的属性不会响应

        // 产生这个原因是由于vue的设计模式所决定

        // 设计模式分类
        // 一、MVC（全称：Model view controller）：后端使用
        // M：Model（模型） 数据
        // V：view（视图） 前端界面
        // C：controller（控制器） 接受并处理用户请求，通知model改变，并将model返回给view

        // （一）实现步骤
        // 1.view传送指令到控制器
        // 2.控制器接收到业务逻辑，要求model改变状态
        // 3.model将数据返回到view，用户得到反馈

        // （二）MVC设计模型的优点
        // 1.低耦合：视图层和业务层分离，这样允许更改视图层代码而不用重新编译模型和控制器代码，
        //   改变其中一个不会影响到其他两个
        // 2.重用性高：MVC模式允许各种不同样式的视图层来访问同一个服务代码，因为多个视图可以共享数据模型
        // 3.生命周期成本低：MVC模式开发和维护的技术成本低
        // 4.部署快：开发时间短，程序员的精力可以都放在业务逻辑上，视图和业务逻辑分开
        // 5.可维护性高：分类的视图层和业务层，便于维护
        // 6.有利于软件的工程化管理

        // 二、MVVM（全称：Model View ViewModel ）：Vue框架使用该设计模型
        // M:Model(数据模型层)  数据一般来源于网络
        // V：view(视图层) 在前端开发中，主要作用就是给用户展示各种信息
        // VM：ViewModel（视图模型层） 是view层和model层的沟通桥梁  （视图模型层主要就是Vue）
        // 一方面它实现了数据绑定，将model层的改变实时的反应到view层中
        // 另一方面它实现了DOM监听，在DOM发生一些事件，可以监听到，并在需要的情况下改变对应的数据

        // （一）MVVM设计模型的优点
        // 1.低耦合：view视图可以独立于model变化和修改，一个viewModel可以绑定到不同的view上，
        // 当view发送变化的时候，model可以不变，当model发送变化的时候，view可以不变
        // 2.可重用性高：一个viewModel可以绑定到不同的view上
        // 3.独立开发：开发人员专注于业务逻辑和数据，设计人员专注于页面设计
        // 4.可测试：界面比较难预测时，测试可以专门针对viewModel来写

        // 三、MVC和MVVM的区别
        // 1.都是设计思路
        // 2.MVC后端用的多，而MVVM是前端的设计思路
        // 3.MVC是单项通信，数据模型必须通过控制器层进行承上启下
        // MVVM是将View和model实现自动同步，当model属性改变时，不需要自动手动操作DOM元素，提交页面渲染性能












    </script>
</body>
</html>